<template>
  <el-main class="image-main" v-loading='loading'>
    <div class="top">
<!--      <div v-for="(item, index) in list" :key="index">-->
<!--        <img :src='item.url' width='100' height='100' class='mb-5'>-->
<!--      </div>-->
      <el-row :gutter='20'>
        <el-col :span='6' :offset='0' v-for='(item, index) in list' :key='index'>
          <el-card shadow='hover' class='relative card' :body-style='{ "padding": 0 }'>
            <!--
              class 中的 w-full 是 windicss 内置的类，表示宽度充满
              h-[150px] 表示高度150px
            -->
            <el-image :src='item.url' fit='cover' class='w-full h-[150px]' :preview-src-list='[item.url]' :initial-index='0'></el-image>
            <div class='image-title'>{{ item.name }}</div>
            <div class='flex items-center justify-center p-2'>
              <el-button text type='primary' @click='handleUpdate(item.id, item.name)'>重命名</el-button>
              <el-popconfirm title="您确定要删除吗？" width="170" @confirm="handleDelete(item.id)">
                <template #reference>
                  <el-button text type='primary'>删除</el-button>
                </template>
              </el-popconfirm>

            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div class="bottom">
      <el-pagination background layout="prev, pager, next" :total="total" :current-page="currentPage" :page-size="limit" @current-change="getData"></el-pagination>
    </div>
  </el-main>

  <el-drawer v-model='drawer' title='上传图片'>
    <upload-file :data='uploadFileParams' @success='handleSuccess'></upload-file>
  </el-drawer>
</template>

<script setup>
import { ref } from "vue";
import { getImageList, deleteImage, updateImage } from '~/api/image'
import { useToast } from 'vue-toastification'
import { showPrompt } from '~/composables/utils'
import UploadFile from '~/components/UploadFile.vue'

// <!--<editor-fold desc="变量">-->
const toast = useToast()
const total = ref(0)
const currentPage = ref(0)
const limit = ref(2)
const list = ref([])
const loading = ref(false)
const categoryId = ref(0)
const drawer = ref(false)
const uploadFileParams = ref({
  fileRename: '重命名的文件名',
  remark: 'vue3上传来的文件',
  parentId: 1,
  category: '乾坤大挪移'
})
// <!--</editor-fold>-->


// <!--<editor-fold desc="方法">-->
const getData = (pageNumber) => {
  loading.value = true
  getImageList(categoryId.value, pageNumber)
    .then(res => {
      if(res.code !== 1){
        toast.error(res.msg)
        return
      }

      currentPage.value = pageNumber
      list.value = res.data.list
      total.value = res.data.pagination.total
    })
    .finally(() => loading.value = false)
}

// 父组件中根据选中的分类调用本方法刷新图片列表
const loadData = (id) => {
  categoryId.value = id
  currentPage.value = 1 // 默认显示选中分类的第一页
  getData(currentPage.value)
}

const handleUpdate = (imgId, imgName) => {
  showPrompt('重命名', imgName)
    .then(res => {
      // 请求重命名API
      updateImage(imgId, res.value)
        .then(res => {
          if(res.code !== 1){
            toast.error(res.msg)
            return
          }

          toast.success(res.msg)
        })
    })
}

const handleDelete = (imgId) => {
  deleteImage(imgId)
    .then(res => {
      if(res.code !==1 ){
        toast.error(res.msg)
        return
      }

      toast.success('删除成功！')
    })
}

const openUploadDrawer = () => drawer.value = true

const handleSuccess = () => {
  // 刷新页面并显示成功通知
  toast.success('上传成功！')
}

defineExpose({
  loadData, openUploadDrawer
})
// <!--</editor-fold>-->
</script>
<style scoped>
.image-main {
  position: relative;
}

.image-main .top {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 50px;
  overflow-y: auto;
}
.image-main .bottom {
  position: absolute;
  bottom: 0;
  height: 50px;
  left: 0;
  right: 0;
  @apply flex items-center justify-center;
}

.card {
  cursor: pointer;
}

.image-title {
  position: absolute;
  top: 122px;
  left: -1px;
  right: -1px;
  @apply text-sm truncate text-gray-100 bg-opacity-50 bg-gray-800 px-2 py-1;
}
</style>
